<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>vue</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
</head>

<body>
    <div id='app'>
        hero--{{hero}}

        <div v-once>
            v-once--{{hero}}
        </div>

        <button @click="game">选择英雄</button>
        <child :title="hero"></child>
    </div>
</body>
<script>
    Vue.component("child", {
        props: ['title'],
        template: `
            <div>
                child--{{title}}
                <button  @click='change'>change</button>
            </div>`,
        methods: {
            change() {
                this.title = '兽王';
            }
        }
    });

    let vm = new Vue({
        el: '#app',
        data: {
            hero: '剑圣'
        },
        methods: {
            game() {
                this.hero = "风行者--覆盖"
            }
        }
    });
    /*
        报错：
            请尽量避免直接修改属性，重新渲染时，会进行覆盖。
            建议通过状态获取计算属性进行操作。
        总结：
            属性：父组件传给子组件的，只有父组件可以重写，不允许子组件重写。
            状态：组件内部的状态，可以随意读写。
        
        v-once:
            如果一个组件包含大量静态内容，可以在根元素添加 v-once 属性，
            确保这些内容只计算一次，然后缓存一起。    
    */

</script>

</html>